<template>
  <div class="auto-scroll-wrapper" :class="[selfClass]">
    <u-list
      v-if="containerHeight"
      :height="containerHeight"
      @scrolltolower="onBottom"
    >
      <slot></slot>
    </u-list>
  </div>
</template>

<script setup>
// u-list-item
import randomString from "random-string";
import { ref, getCurrentInstance, onMounted, toRefs } from "vue";

const props = defineProps({
  height: {
    type: Number,
    default: 0,
  },
});
const { height } = toRefs(props);

const selfClass = randomString(8, { numbers: false });

const emit = defineEmits(["bottom"]);

const onBottom = () => {
  emit("bottom");
};

const containerHeight = ref(0);

let instance;
const initHeight = () => {
  const query = uni.createSelectorQuery().in(instance?.proxy);
  query
    .select(`.${selfClass}`)
    .boundingClientRect((result) => {
      if (result?.height) {
        containerHeight.value = result.height;
      } else {
        console.log("error", "-> ", selfClass, instance);
        // initHeight();
        // setTimeout(initHeight, 1000);
      }
    })
    .exec();
};
onMounted(() => {
  if (height.value) {
    containerHeight.value = height.value;
  } else {
    instance = getCurrentInstance();
    setTimeout(initHeight, 300);
  }
});
</script>

<style lang="scss" scoped>
.auto-scroll-wrapper {
  height: 100%;
}
</style>
